<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="query.query.orderNo" clearable placeholder="请输入订单编号" />
      <el-input v-model="query.query.customerName" clearable placeholder="请输入供应商名称" />
      <el-date-picker v-model="q_p_formDate1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
        range-separator="-" start-placeholder="申请开始日期" end-placeholder="申请结束日期" @change="q_p_selectTimecreate" />
      <el-button type="primary" icon="el-icon-search" @click="search">
        {{ $t("table.search") }}
      </el-button>
      <el-button @click="handleDownload" type="primary" icon="el-icon-download">
        {{ $t("table.export") }}
      </el-button>
    </div>
    <el-table :data="tableData" highlight-current-row border :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column prop="inoutStoreNo" label="出库单号" />
      <el-table-column label="订单编号" prop="businessNo" />
      <el-table-column label="物料名称" prop="materialName" />
      <el-table-column label="物料编码" prop="materialNo" />
      <el-table-column prop="applyType" label="出库类型" align="center" width="80">
        <template slot-scope="{ row:{applyType} }">
          <span>{{ getRkApplyType(applyType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inoutStoreNum" label="出库数量" align="center" width="80" />
      <el-table-column label="仓库" prop="fromWarehouseName" />
      <el-table-column label="客户名称" prop="partnerName" />
      <el-table-column prop="inoutStoreState" label="出库状态" align="center" width="80">
        <template slot-scope="{ row: { inoutStoreState } }">
          {{ inoutStoreState == 0 ? "待出库" : "已出库" }}
        </template>
      </el-table-column>
      <el-table-column label="订单日期" prop="orderDate">
        <template slot-scope="{ row }">
          <span>{{
            row.orderDate | parseTime("{y}-{m}-{d}")
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库申请时间" prop="applyTime">
        <template slot-scope="{ row }">
          <span>{{
            row.applyTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="确认出库时间" prop="replyTime">
        <template slot-scope="{ row }">
          <span>{{
            row.replyTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售收入" prop="sellValue" />
      <el-table-column label="销售成本" prop="buyValue" />
      <el-table-column label="摊销" prop="amortizationValue" />
      <el-table-column label="销售毛利" prop="profit" />
      <el-table-column label="销售毛利率(%)" prop="profitMargin" width="120" />
    </el-table>
    <pagination v-show="total" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize"
      @pagination="getInfo" />
  </div>
</template>
<script>
import {
  accGetGrossProfit,
  accExportGrossProfit
} from "@/api/andonProblemLevel";
import { pageOutstoreList } from "@/api/qmsQualityManagement"
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { downfile } from "@/utils";

export default {
  name: "AndonProblemLevel",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      q_p_formDate1: [],
      total: 0,
      query: {
        pageIndex: 1,
        pageSize: 20,
        query: {
          inOut: 2,
          outStoreState: "1"
        }
      },
      tableData: [],
    };
  },
  mounted() {
    this.getday()
    this.getInfo();
  },
  methods: {
    q_p_selectTimecreate(val) {
      if (val) {
        this.query.query.startDate = val[0]
        this.query.query.endDate = val[1]
      } else {
        this.$nextTick(() => {
          this.getday()
        })
      }
    },
    async handleDownload() {
      try {
        await accExportGrossProfit(this.query);
      } catch (err) {
        const reader = new FileReader();
        reader.readAsText(err);
        reader.onload = (event) => {
          const resultString = reader.result; // 这里就是转换后的字符串
          if (resultString.includes('code') && resultString.includes('isSuccess')) {
            this.$message.error(JSON.parse(resultString).message)
          } else {
            downfile("毛利.xlsx", err);
          }
        }
      }
    },
    getRkApplyType(val) {
      if (val == 1) {
        return "销售出库";
      } else if (val == 2) {
        return "采购入库";
      } else if (val == 4) {
        return "调拨入库";
      } else if (val == 5) {
        return "调拨出库";
      } else if (val == 6) {
        return "其他入库";
      } else if (val == 7) {
        return "其他出库"
      } else if (val == 8) {
        return "销售退货入库";
      } else if (val == 9) {
        return "采购退货出库";
      }
    },
    getday() {
      const currDate = new Date().toLocaleDateString()// 2020/11/6
      const arrs = currDate.split('/')
      const arrs1 = arrs.join('-')
      const yy = parseInt(arrs[0]);
      const mm = parseInt(arrs[1]);
      const dd = parseInt(arrs[2]);
      const pdStr = new Date(yy, mm - 1, 1).toLocaleDateString().split('/').join('-');
      this.query.query.startDate = pdStr
      this.query.query.endDate = arrs1
      this.q_p_formDate1 = [pdStr, arrs1]
    },
    async getInfo() {
      this.tableData = []
      const { records, total } = await pageOutstoreList(this.query);
      if (records.length) {
        const wmsStoreApplyIds = records.map(type => type.id).join(',')
        const data = await accGetGrossProfit({ wmsStoreApplyIds })
        this.tableData = records.map(item => {
          for (let key in data) {
            if (item.id == key) {
              return item = { ...item, ...data[key] }
            }
          }
        })
      }
      this.total = total;
    },
    search() {
      this.query.pageIndex = 1;
      this.getInfo();
    }
  }
};
</script>
